<template>
    <view class="review-detail">
        <view class="avatar">
            <image :src="review.avatar" mode="aspectFill"></image>
        </view>
        <view class="review-content">
            <text class="activity-name">{{ review.activityName }}</text>
            <text class="review-text">{{ review.content }}</text>
            <text class="review-date">{{ review.date }}</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            review: {}
        };
    },
    onLoad(options) {
        // 这里需要根据实际情况从后端或全局状态获取评论详情
        // 简单示例，假设 reviews 数据在全局可用
        const reviews = [
            { 
                id: 1, 
                content: '评价内容1', 
                date: '2025-04-19',
                avatar: '../../static/avatar1.png',
                activityName: '活动1'
            },
            { 
                id: 2, 
                content: '评价内容2', 
                date: '2025-04-18',
                avatar: '../../static/avatar2.png', 
                activityName: '活动2' 
            }
        ];
        const reviewId = parseInt(options.id);
        this.review = reviews.find(item => item.id === reviewId) || {};
    }
}
</script>

<style lang="scss">
    .review-detail {
        padding: 20px;
    }
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #ccc;
    }
    .avatar image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .review-content {
        margin-top: 15px;
    }
    .activity-name {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }
    .review-text {
        display: block;
        margin-bottom: 5px;
    }
    .review-date {
        color: #666;
        font-size: 0.9em;
    }
</style>
